<template>
  <div class="supplier-info-wrap">
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" class="dividing">
        <el-col :span="12">
          <el-form-item label="姓名：" prop="userName" style="margin-bottom: 0px;">
            <ToolTip :content="userInfo.userName" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型：" prop="departmentName" style="margin-bottom: 0px;">
            <ToolTip :content="userInfo.supplierType | supplierType" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别：" prop="sex" style="margin-bottom: 0px;">
            <ToolTip :content="userInfo.sex | flySexStatus " placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码：" prop="phone" style="margin-bottom: 0px;">
            <SecretText :log-text="getLogText('手机号码')" :origin-text="userInfo.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微信号：" prop="wxCode" style="margin-bottom: 0px;">
            <SecretText :log-text="getLogText('微信号')" :origin-text="userInfo.wxCode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接收微信号：" prop="receiveWxCode" style="margin-bottom: 0px;">
            <div class="flex-center">
              <ToolTip :content="userInfo.receiveWxCode" />
              <div v-if="hasRouteAuth('crm:flyUser:wxCode:edit')" class="button-text ml-10" @click="wxCodeDialogShow">编辑</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地域：" prop="region" style="margin-bottom: 0px;">
            <ToolTip :content="handleRegion(userInfo.region)" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="快递地址：" prop="address" style="margin-bottom: 0px;">
            <SecretText :log-text="getLogText('快递地址')" :origin-text="userInfo.address" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证：" prop="idCard" style="margin-bottom: 0px;">
            <div class="ellipsis">
              <SecretText
                v-if="userInfo.idCard && userInfo.idCard.length"
                :log-text="getLogText('身份证')"
                data-type="field" >
                <template slot="field">
                  <FileShowList v-if="userInfo.idCard && userInfo.idCard.length" :file-list="userInfo.idCard" style="max-width:100%;"/>
                </template>
              </SecretText>
              <span v-else>--</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <WxCodeDialog ref="wxCodeDialogRef" @onConfirm="onConfirm" />
  </div>
</template>
<script>
import { format } from '@/filters/date';
import FileShowList from '@/components/CreateOrder/fileShowList';
import WxCodeDialog from './wxCodeDialog';
import { supplierType } from '@/views/signUp/components/status';
import { flySexStatus } from '@/filters/status';
import { hasRouteAuth } from '@/utils/permission';

export default {
  components: {
    WxCodeDialog,
    FileShowList
  },
  filters: {
    flySexStatus,
    supplierType
  },
  props: {
    userInfo: {// 详情信息
      type: Object,
      default: () => {}
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      format
    };
  },
  methods: {
    hasRouteAuth,
    handleRegion(region = '') {
      return region ? region.replace(/,/g, '-') : '';
    },
    // 跳转销售供应商
    toSupplierDetail(channelId) {
      if (channelId) {
        const url = this.$router.resolve({
          name: 'supplierManageDetail',
          params: { id: channelId }
        });
        window.open(url.href, '_blank');
      }
    },
    getLogText(label) {
      return `飞来用户 ${this.userInfo.userName} 的 ${label}`;
    },
    wxCodeDialogShow() {
      this.$refs['wxCodeDialogRef'].openDialog(this.userInfo.receiveWxCode);
    },
    onConfirm(code) {
      this.$emit('onConfirm', code);
    }
  }
};
</script>
<style lang="scss" scoped>
  .supplier-info-wrap{
    .supplier-form {
      & ::v-deep {
        .el-form-item {
            .el-form-item__label {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #999999 !important;
              opacity: 1;
              line-height: 30px;
            }
          }
          .el-form-item__content {
            font-size: 14px;
            font-family: PingFang SC;
            line-height: 30px;
            font-weight: 400;
            color: #333333;
            opacity: 1;
          }
      }
    }
    .link{
      color: #406EFF;
      cursor: pointer;
    }
    .ml-10 {
      margin-left: 10px;
    }
    .dividing{
      &::v-deep {
        .el-col {
          .el-form-item__content {
            border-right: 1px solid #EBEEFD;
          }
          &:nth-child(2n) {
            .el-form-item__content {
              border-right: none;
            }
          }
          &:last-child {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
      }
    }
  }
</style>
